<template>
	<view class="page">



		<view class="main-task-card">
			<view class="task-title">
				<text class="title-text">直播观看任务</text>
				<view class="countdown">
					<uni-icons type="clock" size="16" color="#409EFF"></uni-icons>
					<text class="countdown-text">{{ formatTime }}</text>
				</view>
			</view>
			<view class="progress-info">
				<text class="progress-text">已观看 {{ watchedTime }}分钟/要求{{ requiredTime }}分钟</text>
				<view class="progress-bar">
					<view class="progress-inner" :style="{ width: progressWidth }"></view>
				</view>
			</view>
			<view class="reward-info">
				<view class="points">
					<text class="points-number">+{{ taskPoints }}</text>
					<text class="points-text">积分</text>
				</view>
				<text class="reward-desc">完成任务可得{{ taskPoints }}积分</text>
			</view>
			<button class="action-button" :class="buttonClass" @click="handleTaskAction">
				{{ buttonText }}
			</button>
		</view>

		<view class="other-tasks">
			<text class="section-title">更多任务</text>
			<view class="task-list">
				<view v-for="(task, index) in otherTasks" :key="index" class="task-item">
					<image class="task-icon" :src="task.iconUrl" mode="aspectFill"></image>
					<view class="task-info">
						<text class="task-name">{{ task.name }}</text>
						<text class="task-reward">+{{ task.points }}积分</text>
					</view>
					<button class="task-button" :class="task.status === 'completed' ? 'completed' : ''">
						{{ task.buttonText }}
					</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { UniIcons } from '@dcloudio/uni-ui';

export default {
	components: {
		'uni-icons': UniIcons,
	},
	data() {
		return {
			watchedTime: 0,
			requiredTime: 30,
			taskPoints: 200,
			taskStatus: 'ongoing',
			otherTasks: [
				{
					name: '每日签到',
					points: 50,
					status: 'ongoing',
					buttonText: '去签到',
					iconUrl: ''
				},
				{
					name: '分享直播间',
					points: 100,
					status: 'ongoing',
					buttonText: '去分享',
					iconUrl: ''
				}
			]
		};
	},
	computed: {
		remainingSeconds() {
			const remainingMinutes = this.requiredTime - this.watchedTime;
			return remainingMinutes * 60;
		},
		formatTime() {
			const minutes = Math.floor(this.remainingSeconds / 60);
			const seconds = Math.floor(this.remainingSeconds % 60);
			return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
		},
		progressWidth() {
			return `${(this.watchedTime / this.requiredTime) * 100}%`;
		},
		buttonText() {
			if (this.remainingSeconds <= 0) {
				switch (this.taskStatus) {
					case 'completed':
						return '立即领取';
					case 'claimed':
						return '已领取';
					default:
						return '立即领取';
				}
			} else {
				return '继续观看';
			}
		},
		buttonClass() {
			return {
				'button-ongoing': this.taskStatus === 'ongoing',
				'button-completed': this.taskStatus === 'completed',
				'button-claimed': this.taskStatus === 'claimed'
			};
		}
	},
	mounted() {

		this.test();
	},
	methods: {
		test() {

		},
		handleTaskAction() {
			if (this.taskStatus === 'ongoing') {

				const schemeUrl = 'snssdk1128://live?room_id=7486341600799001344';


				plus.runtime.openURL(schemeUrl, (err) => {
					console.error('打开抖音失败', err);
					uni.showToast({
						title: '打开抖音失败，请手动打开',
						icon: 'none'
					});
				});



				this.startCountdown();
			} else if (this.taskStatus === 'completed') {

				uni.showToast({
					title: '领取成功',
					icon: 'success'
				});
				this.taskStatus = 'claimed';
			}
		},
		startCountdown() {
			const countdownInterval = setInterval(() => {
				if (this.watchedTime < this.requiredTime) {
					this.watchedTime++;
				} else {
					clearInterval(countdownInterval);
					this.taskStatus = 'completed';
				}
			}, 60000);
		}
	}
};
</script>

<style>
page {
	height: 100%;
	background-color: #F5F6F7;
}

.page {
	padding: 0 30rpx;
}

.header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 88rpx;
	margin-bottom: 30rpx;
}

.header-left {
	display: flex;
	align-items: center;
	font-size: 14px;
	color: #333333;
}

.header-title {
	font-size: 18px;
	font-weight: 600;
	background: linear-gradient(90deg, #409EFF 0%, #79bbff 100%);
	-webkit-background-clip: text;
	color: transparent;
}

.header-right {
	font-size: 14px;
	color: #666666;
}

.main-task-card {
	background: #FFFFFF;
	border-radius: 16rpx;
	padding: 30rpx;
	margin-bottom: 30rpx;
	box-shadow: 0 4px 16px rgba(64, 158, 255, 0.1);
}

.task-title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30rpx;
}

.title-text {
	font-size: 16px;
	font-weight: 600;
	color: #333333;
}

.countdown {
	display: flex;
	align-items: center;
	background: rgba(64, 158, 255, 0.1);
	padding: 8rpx 16rpx;
	border-radius: 20rpx;
}

.countdown-text {
	margin-left: 8rpx;
	font-size: 14px;
	color: #409EFF;
}

.progress-info {
	margin-bottom: 30rpx;
}

.progress-text {
	display: block;
	font-size: 14px;
	color: #666666;
	margin-bottom: 16rpx;
}

.progress-bar {
	height: 16rpx;
	background: #F5F6F7;
	border-radius: 8rpx;
	overflow: hidden;
}

.progress-inner {
	height: 100%;
	background: linear-gradient(90deg, #409EFF 0%, #79bbff 100%);
	border-radius: 8rpx;
	transition: width 0.3s ease;
}

.reward-info {
	text-align: center;
	margin-bottom: 30rpx;
}

.points {
	margin-bottom: 8rpx;
}

.points-number {
	font-size: 32px;
	font-weight: 600;
	color: #409EFF;
}

.points-text {
	font-size: 14px;
	color: #666666;
	margin-left: 8rpx;
}

.reward-desc {
	font-size: 14px;
	color: #999999;
}

.action-button {
	width: 100%;
	height: 88rpx;
	border-radius: 44rpx;
	font-size: 16px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
}

.button-ongoing {
	background: #CCCCCC;
	color: #FFFFFF;
}

.button-completed {
	background: #409EFF;
	color: #FFFFFF;
}

.button-claimed {
	background: #F5F6F7;
	color: #999999;
}

.section-title {
	font-size: 16px;
	font-weight: 600;
	color: #333333;
	margin-bottom: 20rpx;
}

.task-list {
	background: #FFFFFF;
	border-radius: 16rpx;
	padding: 0 30rpx;
	box-shadow: 0 4px 16px rgba(64, 158, 255, 0.1);
}

.task-item {
	display: flex;
	align-items: center;
	padding: 30rpx 0;
	border-bottom: 1px solid #F5F6F7;
}

.task-item:last-child {
	border-bottom: none;
}

.task-icon {
	width: 80rpx;
	height: 80rpx;
	border-radius: 40rpx;
	margin-right: 20rpx;
}

.task-info {
	flex: 1;
}

.task-name {
	display: block;
	font-size: 14px;
	color: #333333;
	margin-bottom: 8rpx;
}

.task-reward {
	font-size: 12px;
	color: #409EFF;
}

.task-button {
	width: 160rpx;
	height: 60rpx;
	border-radius: 30rpx;
	font-size: 14px;
	background: #409EFF;
	color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 12px 0 rgba(64, 158, 255, 0.2);
}

.task-button.completed {
	background: #F5F6F7;
	color: #999999;
}
</style>